<template>
	<view class="product">
		<Tabs @change="change" :list="listData" @scrolltolower="scrolltolower"
			:itemStyle="{
				paddingTop: $u.addUnit($u.getPx('44px') + $u.sys().statusBarHeight,'px')
			}">
			<template v-slot:nav>
				 <!-- itemStyle="padding-top: 44px" -->
				<u-navbar :left-icon="false">
					<view class="flex flex-ai-c title" @click="devicePopupShow = true" slot="left">
						<text>{{title}}</text>
						<view style="margin-top: 7rpx;">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</u-navbar>
			</template>
			
			<template :slot="current+'tabs'">
				<productItem :type="true" :list="list" :userType="userType">
					<template v-slot:more>
						<u-loadmore marginTop="20" :status="loadStatus" @loadmore="scrolltolower" margin-top="50"/>
					</template>
				</productItem>
			</template>
			
		</Tabs>
		
		<device-popup @changeAddress="changeAddress" @swichMenu="swichMenu" @close="devicePopupShow = false" :show="devicePopupShow"/>
		<TabBar :current-page="1" />
	</view>
</template>

<script>
	import Tabs from '@/components/tabs.vue'
	import productItem from '@/components/productItem.vue'
	import product from '@/api/product.js'
	import common from '@/api/common.js'
	import devicePopup from '@/components/devicePopup.vue';
	export default {
		components: {
			Tabs,
			productItem, //商品一项
			devicePopup
		},
		data() {
			return {
				devicePopupShow: false,
				loadStatus: '',
				list: [], //数据
				title: 'Hello',
				userinfo: uni.getStorageSync('userinfo'),
				listData: [],
				page: 1,
				current: 0,
				title: '全部设备',
				category_id: '',
				device_no: '',
				userType: []
			}
		},
		onLoad() {
			if(!uni.getStorageSync('token')) return this.onRelaunck()
			this.getGoodsCate()
			this.userType = this.userinfo.account_type.split(",").map(item=>parseInt(item))
		},
		methods: {
			onRelaunck(){
				uni.showToast({
					title: '请登录！',
					icon: 'none',
					duration: 2000
				})
			},
			changeAddress(device_no,current,name) {
				this.title = name
				this.resetting()
				this.devicePopupShow = false
				this.device_no = device_no
				this.getGoodsList()
			},
			swichMenu(index, item) {
				this.title = '全部设备'
				this.resetting()
				this.device_no = ''
				this.devicePopupShow = false
				this.getGoodsList()
			},
			moreStatus(status) {
				this.loadStatus = status
			},
			scrolltolower(){
				if(this.loadStatus == 'nomore') return
				this.category_id = this.listData[this.current].id
				this.getGoodsList()
			},
			//商品分类
			async getGoodsCate() {
				const res = await common.getGoodsCate()
				this.listData = res.data
				if (!res.data.length) return
				this.category_id = res.data[this.current].id
				this.getGoodsList()
			},
			async getGoodsList() {
				this.moreStatus('loading')
				const res = await product.getGoodsList({
					category_id: this.category_id,
					page: this.page,
					page_size: 10,
					device_no: this.device_no
				})
				res.data = res.data || []
				this.list = [...this.list,...res.data]
				if(res.data.length < 10) return this.moreStatus('nomore')
				if (res.data.total <= 10) {
					this.loadStatus = 'nomore'
				} else {
					this.moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
				}
				
				if (res.data.length === 0) return false
				this.page += 1 // 当前页加1
			},
			resetting(){
				this.list = []
				this.page = 1
			},
			change(i) {
				this.resetting()
				this.current = i
				this.category_id = this.listData[i].id
				this.getGoodsList()
			}
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.title {
		background: #fff;
		height: 100rpx;
		padding: 0 39rpx;
		text {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	
	}
	.product {
		height: 100%;
	}
</style>